<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡思美育-首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="shortcut icon" href="images/logo1.png">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="js/swiper-bundle.min.js"></script>
    <script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/echarts.js"></script>
      <!-- tailwind -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <style>

    </style>
</head>
<body>

<!-- 导航栏模块 -->
  
<nav class="bg-black fixed h-auto w-screen top-0 left-0 z-50">
  <img class="h-16 w-auto absolute left-10 " src="images/fsmy1.png" alt="凡思美育" >

    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
      <div class="relative flex items-center justify-between h-16">
        <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
          <!-- Mobile menu button-->
          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            
            <!--
              Icon when menu is closed.
  
              Heroicon name: outline/menu
  
              Menu open: "hidden", Menu closed: "block"
            -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!--
              Icon when menu is open.
  
              Heroicon name: outline/x
  
              Menu open: "block", Menu closed: "hidden"
            -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        
        <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
          <div class="flex-shrink-0 flex items-center">
           
          </div>
         
          <div class="hidden sm:block sm:ml-6">
            
            <div class="flex space-x-4">
              
              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
              <a href="#" class="bg-white text-blue-700 px-3 py-2 rounded-md text-sm font-medium" aria-current="page">首页</a>
  
              <a href="#" class="text-gray-300 hover:bg-gray-300 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">试听课</a>
              <a href="#" class="text-gray-300 hover:bg-gray-300 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">实战课</a>
  
              <a href="#" class="text-gray-300 hover:bg-gray-300 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">体系课</a>
  
              <a href="#" class="text-gray-300 hover:bg-gray-300 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">更多</a>
            </div>
          </div>
         
        </div>
        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 ">
            <input class="form-control me-2 w-96 focus:ring-2 focus:ring-blue-600 relative" type="search " placeholder="请输入关键字..." aria-label="Search"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search absolute   right-56" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
            <button class="btn btn-outline-success bg-green-500 text-white hover:bg-green-800 " type="submit">搜索</button>
           
        </div>
        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            
            <a href="login.html" class=" text-white px-1 py-2 rounded-md text-sm font-medium" aria-current="page">登录</a><span class="text-white">/</span>
            <a href="register.html" class=" text-white px-2 py-2 rounded-md text-sm font-medium" aria-current="page">注册</a>
     
  
          <!-- Profile dropdown -->
          <!-- <!-- <div class="ml-3 relative"> -->
            <div>
              <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="sr-only">Open user menu</span>
                <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
              </button>
           
  
            </div> 
            <!--
              Dropdown menu, show/hide based on menu state.
  
              Entering: "transition ease-out duration-100"
                From: "transform opacity-0 scale-95"
                To: "transform opacity-100 scale-100"
              Leaving: "transition ease-in duration-75"
                From: "transform opacity-100 scale-100"
                To: "transform opacity-0 scale-95"
            -->
            <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <!-- Active: "bg-gray-100", Not Active: "" -->
              <!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
            </div> --> 
          </div>
        </div>
      </div>
    </div>
 
  
    <!-- Mobile menu, show/hide based on menu state. -->
    <div class="sm:hidden" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
        <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
  
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
  
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
  
        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
      </div>
    </div>
  </nav>
  <!-- banner模块 -->
<hr class="mt-20">
<!-- 列表 -->
<div class="banner h-banner flex">
  <ul class="w-48 bg-white teach_list cursor-pointer mt-2 ">
    <h2 class="bg-black font-bold text-xl text-white rounded-md px-14 leading-10">热门教育</h2>
    <li><a href="#" class="hover:text-white">家庭教育</a></li>
    <li><a href="#" class="hover:text-white">美术绘画</a></li>
    <li><a href="#" class="hover:text-white">音乐体育</a></li>
    <li><a href="video.html" class="hover:text-white">考研培训</a></li>
    <li><a href="#" class="hover:text-white">编程</a></li>
    <li><a href="#" class="hover:text-white">书法</a></li>
    <li><a href="#" class="hover:text-white">武术</a></li>
    <li><a href="#" class="hover:text-white">吉他</a></li>
    <li><a href="#" class="hover:text-white">外语</a></li>
    <li><a href="#" class="hover:text-white">数学</a></li>
    <li><a href="#" class="hover:text-white">瑜伽</a></li>
    <li><a href="#" class="hover:text-white">电竞</a></li>
  </ul>
  <!-- 轮播图 -->
 <!-- Swiper -->
 <div class="swiper mySwiper ">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="./images/ban1.jpg" />

    </div>
    <div class="swiper-slide">
      <img src="./images/ban1.png" />
    </div>
    <div class="swiper-slide">
      <img src="./images/ban2.jpg" />

    </div>
    <div class="swiper-slide">
      <img src="./images/ban2.png" />

    </div>
    
  
 
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

  </div>
  <!-- 课程 -->
<div class="bg-white pt-7">
  <h2 class="font-extrabold  ml-60 text-2xl mb-4">精选课程</h2>
  <div class="max-w-2xl mx-auto py-2 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
    <h2 class="sr-only">Products</h2>

    <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8" id="per">
      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="images/mu.png" alt="" class="w-full h-full object-center object-cover group-hover:opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">基础乐理入门</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$48</p>
      </a>

      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="images/ws.png" alt="Olive drab green insulated bottle with flared screw lid and flat top." class="w-full h-full object-center object-cover group-hover:opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        
        <h3 class="mt-4 text-sm text-gray-700">中国套路传统武术教学</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$35</p>
      </a>

      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="images/yy.png" alt="Person using a pen to cross a task off a productivity paper card." class="w-full h-full object-center object-cover group-hover:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">英语语法精讲合集</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$89</p>
      </a>

      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="images/hh.jpg" alt="Hand holding black machined steel mechanical pencil with brass tip and top." class="w-full h-full object-center object-cover group-hover:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">学画画最速通关全攻略！</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$35</p>
      </a>

      <!-- More products... -->
    </div>
  </div>
</div>

<div class="bg-white mt-4 mb-5">
  <div class="max-w-2xl mx-auto py-1 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
    <h2 class="sr-only">Products</h2>

    <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="http://upload.mobiletrain.org/2020/0415/1586915209960.jpg" alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." class="w-full h-full object-center object-cover group-hover:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">Earthen Bottle</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$299</p>
      </a>

      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="http://upload.mobiletrain.org/2020/0329/1585476609484.jpg" alt="Olive drab green insulated bottle with flared screw lid and flat top." class="w-full h-full object-center object-cover group-hover:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">Nomad Tumbler</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$399</p>
      </a>

      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="http://upload.mobiletrain.org/2019/0523/1558599174266.jpg" alt="Person using a pen to cross a task off a productivity paper card." class="w-full h-full object-center object-cover group-hover:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">Focus Paper Refill</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$289</p>
      </a>

      <a href="video.html" class="group">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8 relative exm_video">
          <img src="http://upload.mobiletrain.org/2019/0523/1558603801570.jpg" alt="Hand holding black machined steel mechanical pencil with brass tip and top." class="w-full h-full object-center object-cover group-hover:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-play-circle-fill start" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
          </svg>
        </div>
        <h3 class="mt-4 text-sm text-gray-700">Machined Mechanical Pencil</h3>
        <p class="mt-1 text-lg font-medium text-gray-900">$599</p>
      </a>

      <!-- More products... -->
    </div>
  </div>
</div>
<!-- 优秀机构 -->
<div class="jg max-w-full">
  <h2 class="font-extrabold  ml-60 text-2xl mb-4">优秀机构</h2>
  <!-- 第一行 -->
  <div class="row mx-16 max-w-full">
    <div class="col-sm-6 col-lg-4 px-14 border">
      <div class="thumbnail">
        <img src="./images/yj.jpg"class="my-0 mx-auto" alt="...">
        <div class="caption ">
          <h3 class="text-left font-bold text-blue-500 text-lg">早教幼教</h3>
          <p class="  text-left">专注儿童感统教育多年,2-8岁更好更权威的儿童能力教育，儿童一站式教育服务机构</p>
          <p class="my-3"><a href="#" class="btn btn-primary" role="button">官网简介</a> <a href="#" class="btn btn-default" role="button">免费体验</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 px-14 border">
      <div class="thumbnail">
        <img src="./images/jw.jpg"class="my-0 mx-auto" alt="...">
        <div class="caption ">
          <h3 class="text-left font-bold text-blue-500 text-lg">国际街舞</h3>
          <p class="">研修院以“芳华正茂，腾空国际”为愿景，采用科学的课程体系、先进的设施，致力于吸引全球追求舞蹈艺术梦想的优秀人才在此汇聚。 </p>
          <p class="my-3"><a href="#" class="btn btn-primary" role="button">官网简介</a> <a href="#" class="btn btn-default" role="button">免费体验</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 px-14 border">
      <div class="thumbnail ">
        <img src="./images/en.jpg" class="my-0 mx-auto" alt="...">
        <div class="caption ">
          <h3 class="text-left font-bold text-blue-500 text-lg">大洋雅思</h3>
          <p class=" ">长期致力雅思托福培训、英语学术研究、出国口语、考试分析、留学咨询，有正规办学资质，在郑州市办学已达多年。 </p>
          <p class="my-3"><a href="#" class="btn btn-primary" role="button">官网简介</a> <a href="#" class="btn btn-default" role="button">免费体验</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- 第二行 -->
  <div class="row mx-16 max-w-full mb-6">
    <div class="col-sm-6 col-lg-4 px-14 border">
      <div class="thumbnail">
        <img src="./images/xb.jpeg"class="my-0 mx-auto" alt="...">
        <div class="caption ">
          <h3 class="text-left font-bold text-blue-500 text-lg">肖邦艺术</h3>
          <p class="  text-left">以“专业化，正规化、规范化、个性化”为教学标准，因材施教，以“快乐教学法”为教育方法，寓教于乐，</p>
          <p class="my-3"><a href="#" class="btn btn-primary" role="button">官网简介</a> <a href="#" class="btn btn-default" role="button">免费体验</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 px-14 border">
      <div class="thumbnail">
        <img src="./images/ky.png" class="my-12 pt-8" alt="...">
        <div class="caption ">
          <h3 class="text-left font-bold text-blue-500 text-lg">万学教育</h3>
          <p class="">研修院以“芳华正茂，腾空国际”为愿景，采用科学的课程体系、先进的设施，致力于吸引全球追求舞蹈艺术梦想的优秀人才在此汇聚。 </p>
          <p class="my-3"><a href="#" class="btn btn-primary" role="button">官网简介</a> <a href="#" class="btn btn-default" role="button">免费体验</a></p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 px-14 border">
      <div class="thumbnail ">
        <img src="./images/sgg.jpg" class="my-0 mx-auto" alt="...">
        <div class="caption ">
          <h3 class="text-left font-bold text-blue-500 text-lg">尚硅谷</h3>
          <p class=" ">一站式IT培训就业服务平台，多年教学实践/合作就业企业数千家/亿元融资。打破时空限制，开启云端学习
          </p>
          <p class="my-3"><a href="#" class="btn btn-primary" role="button">官网简介</a> <a href="#" class="btn btn-default" role="button">免费体验</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 教学理念 -->
<section class="sec">
<img src="images/fsmy1.png" alt="" class="w-40 flex pt-36">
<article class="flex flex-col items-center -mt-36    ml-48"><h1 class="text-white font-extrabold text-5xl mb-3 mt-16">创办理念</h1>
  <i><h2  class="text-gray-400 font-extrabold text-xl">Founding concept</h2>
  </i></article>
<div class="mt-32 "> 
  <h3>尊重：尊重天性，通过点燃兴趣帮助学员爱上学习</h3> 
<h3>成长：陪伴成长，通过培养习惯帮助学员塑造人格</h3>
<h3>进取：激发拼搏，通过共同奋斗帮助学员持续提升 </h3>
</div> 
</section>
  <!-- 地图模块 -->
  <div id="map" class=" bg-white relative">

<h1 class="text-4xl text-black text-center mt-10"><span class="font-extrabold">全国校区 </span>及学科分布</h1>
<div id="main" class="w-2/5 h-full ml-36 -mt-9 inline-block "></div>
<aside class="absolute top-36 right-80  ">
  <div class="inline-block"><h4 class="inline-block text-xl text-gray-400 font-bold">选择校区</h4><select name="" id="" class="border border-solid w-32 h-7 ml-2  rounded-md">
    <option value="" class=" block w-20 h-8 border text-center">河南平顶山校区</option>
    <option value="" class=" block w-20 h-8 border text-center">上海静安校区</option>
    <option value="" class=" block w-20 h-8 border text-center">北京昌平校区</option>
  </select>
</div>
<div class="mt-4 ">
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg mb-3">高考</button>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg mb-3">武术</button>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg mb-3">音乐</button>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg mb-3">编程</button><br>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg">舞蹈</button>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg">技术培训</button>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg">直播运营</button>
  <button class="border border-gray- w-24 h-8  mr-2 rounded-lg">家教</button>
  <p class="mt-20 mb-3  ">地址：河南省平顶山市新华区河南城建学院</p>
  <p>电话：19838558988</p>
</div>
<div class="con">
  <h1 class="text-center text-3xl font-bold text-blue-300 mt-5">&lt; 联系我们 &gt;</h1>
  <img src="images/wechat.jpg" alt="" class="w-48  text-center mt-2 float-right mr-28 ">
</div>
</aside>

  </div>
<!-- footer模块 -->
<footer class="footer">
  <div class="w">
    
    
      <!-- mod_copyright模块 -->
      <div class="mod_copyright">
          <div class="w">
              <div class="links">
                  <ul>
                      <li><a href="">关于我们</a></li>
                      <li>|</li>
                      <li><a href="">联系我们</a></li>
                      <li>|</li>
                      <li><a href="">联系客服</a></li>
                      <li>|</li>
                      <li><a href="">商家入驻</a></li>
                      <li>|</li>
                      <li><a href="">营销中心</a></li>
                      <li>|</li>
                      <li><a href="">手机凡思美育</a></li>
                      <li>|</li>
                      <li><a href="">友情链接</a></li>
                      <li>|</li>
                      <li><a href="">销售联盟</a></li>
                      <li>|</li>
                      <li><a href="">凡思美育社区</a></li>
                      <li>|</li>
                      <li><a href="">提供意见</a></li>
                      <li>|</li>
                      <li><a href="./机构后台管理/node_modules/gentelella/production/index.html">后台管理</a></li>
                    
                  </ul>
              </div>
              <div class="copyright">
                  <p>地址：河南省平顶山市新华区龙翔大道河南城建学院  电话：19838558988 传真：010-82935100 邮箱: 871602699@qq.com</p>
                  <p>豫ICP备2022009134号-1</p>
              </div>
          </div>
      </div>
</footer>
<script>
// var echarts = require('echarts');

var ROOT_PATH =
  'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var app = {};

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
let projection;
$.when(
  $.get(ROOT_PATH + '/data/asset/geo/world.json'),
  $.getScript('https://cdn.jsdelivr.net/npm/d3-array'),
  $.getScript('https://cdn.jsdelivr.net/npm/d3-geo')
).done(function (res) {
  myChart.hideLoading();
  // Add graticule
  const graticuleLineStrings = [];
  for (let lat = -80; lat <= 80; lat += 10) {
    graticuleLineStrings.push(createLineString([-180, lat], [180, lat]));
  }
  for (let lng = -180; lng <= 180; lng += 10) {
    graticuleLineStrings.push(createLineString([lng, -80], [lng, 80]));
  }
  res[0].features.unshift({
    geometry: {
      type: 'MultiLineString',
      coordinates: graticuleLineStrings
    },
    properties: {
      name: 'graticule'
    }
  });
  echarts.registerMap('world', res[0]);
  projection = d3.geoOrthographic();
  option = {
    geo: {
      map: 'world',
      projection: {
        project: (pt) => projection(pt),
        unproject: (pt) => projection.invert(pt),
        stream: projection.stream
      },
      itemStyle: {
        borderColor: '#333',
        borderWidth: 1,
        borderJoin: 'round',
        color: '#000'
      },
      emphasis: {
        label: {
          show: false
        },
        itemStyle: {
          color: 'skyblue'
        }
      },
      regions: [
        {
          name: 'graticule',
          itemStyle: {
            borderColor: '#bbb'
          },
          emphasis: {
            disabled: true
          }
        }
      ]
    }
  };
  myChart.setOption(option);
});
app.config = {
  rotateX: 0,
  rotateY: 0,
  onChange() {
    projection && projection.rotate([app.config.rotateX, app.config.rotateY]);
    myChart.setOption({
      geo: {}
    });
  }
};
app.configParameters = {
  rotateX: {
    min: -180,
    max: 180
  },
  rotateY: {
    min: -80,
    max: 80
  }
};
function createLineString(start, end) {
  const dx = end[0] - start[0];
  const dy = end[1] - start[1];
  const segs = 50;
  const stepX = dx / segs;
  const stepY = dy / segs;
  const points = [];
  // TODO needs adaptive sampling on the -180 / 180 of azimuthal projections.
  for (let i = 0; i <= segs; i++) {
    points.push([start[0] + i * stepX, start[1] + i * stepY]);
  }
  return points;
}

option && myChart.setOption(option);
</script>
  <script>
    // // swiper
    // var swiper = new Swiper(".mySwiper", {
    //   cssMode: true,
    //   loop:true,
    //   autoplay:{
    //    delay:2000,
    //    stopOnLastSlide: false,
    //   },
    //   navigation: {
    //     nextEl: ".swiper-button-next",
    //     prevEl: ".swiper-button-prev",
    //   },
    //   pagination: {
    //     el: ".swiper-pagination",
    //   },
    //   mousewheel: true,
    //   keyboard: true,
    // });
    var swiper = new Swiper(".mySwiper", {
      loop:true,
      autoplay:{
       delay:2000,
       stopOnLastSlide: false,
      },
        effect: "flip",
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
  </script>
   
</body>
</html>